@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/mixins";

.circular__progress-bar {
	position: relative;

	&.desktop-scaling {
		@include break-mobile {
			// mobile first, upscale for desktop
			transform: scale(1.3);
		}
	}

	&-empty-circle {
		stroke: var(--studio-gray-5, $gray-200);
	}

	&-fill-circle {
		stroke: var(--color-accent);
		transform-origin: center;
		transform: rotate(-90deg);
		stroke-linecap: round;
	
		.circular__progress-bar.is-success & {
			stroke: $alert-green !important;
		}
	}

	&-text {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-size: 11.5px; // 11.5px mobile, 15px desktop (30% upscaling)
		font-weight: 500;
		letter-spacing: 0.05em;

		// center the text inside the circle
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50%;

	}
}
